<template>
  <div class="home">
    <van-nav-bar :title="$route.name" />

    <!--轮播图-->
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(item, index) in bannerList" :key="index">
        <img v-lazy="item.img" class="banner" style="width: 200px" />
      </van-swipe-item>
    </van-swipe>

    <!--导航展示-->
    <van-grid column-num="5" :border="false">
      <van-grid-item>
        <van-image :src="require('../assets/images/icon/seckill.png')" />
        <p class="navtitle">限时秒杀</p>
      </van-grid-item>
      <van-grid-item>
        <van-image :src="require('../assets/images/icon/top.png')" />
        <p class="navtitle">畅销商品</p>
      </van-grid-item>
      <van-grid-item>
        <van-image :src="require('../assets/images/icon/brand.png')" />
        <p class="navtitle">品质大牌</p>
      </van-grid-item>
      <van-grid-item>
        <van-image :src="require('../assets/images/icon/selfsupport.png')" />
        <p class="navtitle">小U自营</p>
      </van-grid-item>
      <van-grid-item>
        <van-image :src="require('../assets/images/icon/integral.png')" />
        <p class="navtitle">积分商城</p>
      </van-grid-item>
    </van-grid>

    <!--标签页-->
    <van-tabs :active="active" :change="onChange">
      <van-tab title="热门推荐">
        <van-card
          @click='goDetail(item.id)'
          v-for="item in hotList"
          :key="item.id"
          num="1"
          :price="item.price | toPrice"
          desc="描述信息"
          :title="item.goodsname"
          :thumb="item.img"
          :origin-price="item.market_price"
        />
      </van-tab>
      <van-tab title="上新推荐">
        <van-card
          @click='goDetail(item.id)'
          v-for="item in newList"
          :key="item.id"
          num="1"
          :price="item.price | toPrice"
          desc="描述信息"
          :title="item.goodsname"
          :thumb="item.img"
          :origin-price="item.market_price"
        />
      </van-tab>
      <van-tab title="所有商品">
        <van-card
          @click='goDetail(item.id)'
          v-for="item in goodsList"
          :key="item.id"
          num="1"
          :price="item.price | toPrice"
          desc="描述信息"
          :title="item.goodsname"
          :thumb="item.img"
          :origin-price="item.market_price"
        />
      </van-tab>
    </van-tabs>
   
  </div>
</template>

<script>
import { getBanner, homeGoods } from '../request/api.js'
export default {
  name: 'Home',
  data() {
    return {
      active: 1,
      bannerList: [],
      newList: [],
      hotList: [],
      goodsList: []
    }
  },
  methods: {
    onChange(event) {
      wx.showToast({
        title: `切换到标签 ${event.detail.name}`,
        icon: 'none',
      });
    },
    goDetail(id){
      this.$router.push({
        path:'/detail',
        query:{
          id
        }
      })
    }
  },
  mounted() {
    getBanner().then(res => {
      if(res.data.code == 200) {
        this.bannerList = res.data.list
      }
    })
    homeGoods().then((res) => {      
      //  根据商品列表中的 是否新品 是否热卖 区分
      if (res.data.code == 200) {
        this.hotList = res.data.list[0].content;
        this.newList = res.data.list[1].content;
        this.goodsList = res.data.list[2].content;
      }
    })
  }
}
</script>

<style scoped>
.banner {
  width: 100%!important;
  height: 200px;
}
.navtitle {
  font-size: 14px;
}
</style>